<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志查询 - 运费计算系统</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/layout.css">
    <style>
        .operation-log-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f7fa;
            min-height: 100vh;
        }

        .log-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .log-header h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 24px;
        }

        .log-header p {
            color: #7f8c8d;
            margin: 0;
        }

        .search-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            align-items: end;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 5px;
            color: #34495e;
            font-weight: 500;
        }

        .form-control {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-secondary {
            background: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background: #7f8c8d;
        }

        .log-table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .log-table {
            width: 100%;
            border-collapse: collapse;
        }

        .log-table th,
        .log-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .log-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }

        .log-table tbody tr:hover {
            background: #f8f9fa;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
        }

        .status-error {
            background: #f8d7da;
            color: #721c24;
        }

        .operation-type {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .op-insert {
            background: #d1ecf1;
            color: #0c5460;
        }

        .op-update {
            background: #fff3cd;
            color: #856404;
        }

        .op-delete {
            background: #f8d7da;
            color: #721c24;
        }

        .op-batch {
            background: #e2e3e5;
            color: #383d41;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            gap: 10px;
        }

        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-top: 1px solid var(--color-border-light);
            background: var(--color-background-lighter);
        }

        .pagination-info {
            color: var(--color-text-secondary);
            font-size: 14px;
        }

        .pagination-controls {
            display: flex;
            gap: 0.25rem;
            align-items: center;
        }

        .page-size-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-text-secondary);
            font-size: 14px;
        }

        .page-size-selector select {
            padding: 0.25rem 0.5rem;
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-sm);
            background: var(--color-background);
            color: var(--color-text-primary);
        }

        .pagination-ellipsis {
            padding: 0.5rem;
            color: var(--color-text-placeholder);
        }

        .page-btn {
            padding: 6px 12px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .page-btn:hover {
            background: #f8f9fa;
        }

        .page-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        .page-btn:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        .statistics-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-card {
            padding: 15px;
            border-radius: 6px;
            text-align: center;
        }

        .stat-card-1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .stat-card-2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .stat-card-3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .stat-card-4 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }

        .detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 8px;
            max-width: 800px;
            width: 90%;
            max-height: 80%;
            overflow-y: auto;
        }

        .modal-header {
            border-bottom: 1px solid #ecf0f1;
            padding-bottom: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #7f8c8d;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .detail-item {
            padding: 10px;
            border: 1px solid #ecf0f1;
            border-radius: 4px;
        }

        .detail-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .detail-value {
            color: #34495e;
            word-break: break-all;
        }

        .json-container {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #ecf0f1;
            max-height: 200px;
            overflow-y: auto;
        }

        .json-container pre {
            margin: 0;
            font-size: 12px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="operation-log-container">
        <!-- 页面标题 -->
        <div class="log-header">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h1>操作日志查询</h1>
                    <p>查看系统中所有操作记录，支持多维度筛选和统计分析</p>
                </div>
                <div>
                    <button class="btn btn-secondary" onclick="window.location.href='index.html'" style="padding: 8px 16px;">
                        ← 返回主页
                    </button>
                </div>
            </div>
        </div>

        <!-- 统计面板 -->
        <div class="statistics-panel">
            <div class="stats-grid">
                <div class="stat-card stat-card-1">
                    <div class="stat-number" id="todayCount">-</div>
                    <div class="stat-label">今日操作</div>
                </div>
                <div class="stat-card stat-card-2">
                    <div class="stat-number" id="successCount">-</div>
                    <div class="stat-label">成功操作</div>
                </div>
                <div class="stat-card stat-card-3">
                    <div class="stat-number" id="errorCount">-</div>
                    <div class="stat-label">失败操作</div>
                </div>
                <div class="stat-card stat-card-4">
                    <div class="stat-number" id="totalCount">-</div>
                    <div class="stat-label">总操作数</div>
                </div>
            </div>
        </div>

        <!-- 搜索面板 -->
        <div class="search-panel">
            <form class="search-form" id="searchForm">
                <div class="form-group">
                    <label for="moduleType">模块类型</label>
                    <select id="moduleType" class="form-control">
                        <option value="">全部模块</option>
                        <option value="AREA">区域管理</option>
                        <option value="FREIGHT_STRATEGY">运费策略</option>
                        <option value="AREA_PRICING">区域定价</option>
                        <option value="WEIGHT_SEGMENT_RULE">重量区间规则</option>
                        <option value="STRATEGY_ASSIGNMENT">策略分配</option>
                        <option value="PRICING_AREA_MAPPING">定价区域映射</option>
                        <option value="UNIFIED_CONFIG">统一配置</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="operationType">操作类型</label>
                    <select id="operationType" class="form-control">
                        <option value="">全部操作</option>
                        <option value="INSERT">新增</option>
                        <option value="UPDATE">修改</option>
                        <option value="DELETE">删除</option>
                        <option value="BATCH_INSERT">批量新增</option>
                        <option value="BATCH_UPDATE">批量修改</option>
                        <option value="BATCH_DELETE">批量删除</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="operator">操作人</label>
                    <input type="text" id="operator" class="form-control" placeholder="请输入操作人">
                </div>
                <div class="form-group">
                    <label for="status">操作状态</label>
                    <select id="status" class="form-control">
                        <option value="">全部状态</option>
                        <option value="1">成功</option>
                        <option value="2">失败</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="businessName">业务名称</label>
                    <input type="text" id="businessName" class="form-control" placeholder="请输入业务名称">
                </div>
                <div class="form-group">
                    <label for="traceId">链路追踪ID</label>
                    <input type="text" id="traceId" class="form-control" placeholder="请输入链路追踪ID">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">查询</button>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
                </div>
            </form>
        </div>

        <!-- 日志表格 -->
        <div class="log-table-container">
            <table class="log-table">
                <thead>
                    <tr>
                        <th>操作时间</th>
                        <th>模块类型</th>
                        <th>操作类型</th>
                        <th>操作描述</th>
                        <th>操作人</th>
                        <th>执行耗时</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="logTableBody">
                    <!-- 数据将通过JS动态加载 -->
                </tbody>
            </table>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info" id="pagination-info">
                    <!-- 分页信息将通过JS动态生成 -->
                </div>
                <div class="pagination-controls" id="pagination-controls">
                    <!-- 分页按钮将通过JS动态生成 -->
                </div>
                <div class="page-size-selector">
                    每页显示：
                    <select id="pageSize" onchange="operationLogManager.changePageSize(this.value)">
                        <option value="10" selected>10条</option>
                        <option value="20">20条</option>
                        <option value="50">50条</option>
                        <option value="100">100条</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情弹窗 -->
    <div class="detail-modal" id="detailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>操作日志详情</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div id="modalBody">
                <!-- 详情内容将通过JS动态加载 -->
            </div>
        </div>
    </div>

    <!-- 加载 axios 库 -->
    <script src="libs/axios.min.js"></script>

    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/operation-log.js"></script>

    <script>
        // 全局变量
        let operationLogManager;

        // 强制初始化API管理器
        function initializeApi() {
            console.log('🔧 开始初始化API...');

            // 检查axios是否已加载
            if (typeof axios === 'undefined') {
                console.error('❌ axios未加载，检查脚本加载顺序');
                return;
            }

            console.log('✅ axios已加载');

            if (window.globalApiManager) {
                window.globalApiManager.initialize();
                console.log('✅ 强制初始化API管理器完成');

                // 检查API实例是否创建成功
                const api = window.globalApiManager.getApiInstance();
                if (api && typeof api.getOperationLogStatistics === 'function') {
                    console.log('✅ API实例创建成功，具备操作日志方法');
                } else {
                    console.warn('⚠️ API实例创建失败或缺少必要方法');
                }
            } else {
                console.error('❌ globalApiManager不存在');
            }
        }

        // 初始化操作日志管理器
        async function initializeOperationLog() {
            try {
                // 等待API初始化完成
                if (window.waitForApiInitialization) {
                    await window.waitForApiInitialization();
                    console.log('✅ API初始化完成，开始创建操作日志管理器');
                }

                // 初始化错误处理
                if (window.ErrorHandler) {
                    ErrorHandler.init();
                }

                // 创建操作日志管理器
                operationLogManager = new OperationLogManager();
                window.operationLogManager = operationLogManager;

                console.log('✅ 操作日志管理器初始化完成');
            } catch (error) {
                console.error('❌ 操作日志管理器初始化失败:', error);
                // 备用初始化：不依赖API
                operationLogManager = new OperationLogManager();
                window.operationLogManager = operationLogManager;
            }
        }

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 立即初始化API
            initializeApi();

            // 延迟一点初始化操作日志管理器，等待API准备好
            setTimeout(initializeOperationLog, 100);
        });

        // 全局函数，供 HTML 中的 onclick 事件使用
        function resetForm() {
            if (operationLogManager) {
                operationLogManager.resetForm();
            }
        }

        function closeModal() {
            if (operationLogManager) {
                operationLogManager.closeModal();
            }
        }
    </script>
</body>
</html>
